<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选</title>
  <!-- 导入iconfont字体图标库 -->
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2450968_czn31zbxoqa.css">
  <!-- 导入字体图标库fontaswcome -->
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
    /* 头部样式 */
  .header {
    height: 36px;
    background-color: #333;
  }
  /* 头部居中样式 */
  .center {
    height: 36px;
    width: 1090px;
    margin: 0 auto;
  }
  .header .header_left {
    float: left;
    height:36px;
    /* 文字垂直居中 */
    line-height: 36px;
    color: #fff;
    font-size: 12px;
  }
  /* 小喇叭 */
  .header .header_left::before {
    float: left;
    margin-top: 9px;
    margin-right: 5px;
    content:'';
    height: 15px;
    width: 15px;
    background-image: url(http://yanxuan.nosdn.127.net/d132c2561f18f1149d566a60d05fd9b7.gif);
    background-size: 100% 100%;
  }
  .header .header_right {
    float: right;
  }

  .header .header_right ul li {
    float: left;
    color: #fff;
    height: 36px;
    line-height: 36px;
    margin-right:10px;
  }

  .header .header_right ul li::after {
    content: '';
    height: 20px;
    width: 1px;
    /* display: inline-block; */
    float: right;
    margin-top: 8px;
    background-color: #fff;
    margin-left: 10px;
  }
  

  /* 搜索样式 */
  .search {
      margin-top: 24px;
  }
  /* 清除浮动 */
  .search::after{
    clear: both;
    content: '';
    display: block;
  }
  .search .search_left {
    float: left;
    width: 212px;
    height: 60px;
    background-image: url(http://yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-s2904006215-b2811ec0e9.png?imageView&type=webp);
    background-position: 0 -300px;
  }
  .search .search_right {
    float: right;
    width: 800px;
    height: 60px;
  }
  .search .search_right .search_input {
      float: left;
      width: 532px;
      height: 36px;
      border: 1px solid #cc9756;
      border-radius: 19px;
  }
  .search .search_right .search_input input {
      width: 350px;
      height: 35px;
      margin-left: 35px;
      /* 没有边框 */
      border: none;
      /* 输入框聚焦时的修饰外边框 */
      outline: 0;
  }
  .search .search_desc:hover {
    background-color: #e2c199;
  }
  .search .search_desc {
    width: 90px;
    height: 36px;
    color: #fff;
    font-size: 16px;
    background-color: #cc9756;
    border-top-right-radius: 19px;
    border-bottom-right-radius: 19px;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 36px;
    float: right;
  }
  .search .search_right .search_car {
      float: right;
      
  }
  .search .icon-search{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    /* 图标大小 */
    font-size:20px;
    /* 图标颜色 */
    color: #ccc;
  }
  /* 人气推荐 */
  .pop{
    height: 700px;
    background-color: #f4f0ea;
    padding-top: 20px;
  }
  .pop .pop_header{
    height: 48px;
    padding-bottom: 20px;
    /* 字体粗细 */
    font-weight: 800;
  }
  .pop .pop-left{
    float: left;
    width: 390px;
    height: 570px;
    background-color: #345;
  }
  .pop .pop-right{
    float: right;
    width: 690px;
    height: 570px;
  }
  .pop .pop_item{
    width: 223px;
    height: 280px;
    float: left;
    background-color: #ccc;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
  .pop .pop_item:nth-child(3),
  .pop .pop_item:nth-child(6){
    margin-right: 0;
  }
  
</style>
<body>
  <div class="container">
    <!-- 头部开始-->
    <div class="header">
      <!-- 头部居中 -->
      <div class="center">
        <div class="header_left">关于电话服务工作时间变更通知</div>
        <div class="header_right">
          <ul>
            <li>登录/注册</li>
            <li>我的订单</li>
            <li>会员</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 头部结束 -->

    <!-- 搜索开始 -->
    <div class="search">
        <div class="center">
            <div class="search_left"></div>
            <div class="search_right">
                <div class="search_input">
                    <i class="iconfont icon-search"></i>
                    <input type="text">
                    <div class="search_desc">搜索</div>
                </div>
                <div class="search_car"></div>
            </div>
        </div>
    </div>
    <!-- 搜索结束 -->
    <div class="pop">
      <div class="center">
        <div class="pop_header">人气推荐</div>
        <div class="pop_list">
          <div class="pop-left"></div>
          <div class="pop-right">
            <div class="pop_item">商品</div>
            <div class="pop_item">商品</div>
            <div class="pop_item">商品</div>
            <div class="pop_item">商品</div>
            <div class="pop_item">商品</div>
            <div class="pop_item">商品</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
